<template>
    <div style="margin-top: 50px;">
        <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" class="form-inner-container" size="small">
            <el-form-item label="商品分类:" prop="productCategoryId" style="text-align: left;">
                <el-cascader v-model="selectProductCateValue" :options="productCateOptions"></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称:" prop="name">
                <el-input v-model="value.name"></el-input>
            </el-form-item>
            <el-form-item label="副标题:" prop="subTitle">
                <el-input v-model="value.subTitle"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌:" prop="brandId" style="text-align: left;">
                <el-select v-model="value.brandId" @change="handleBrandChange" placeholder="请选择">
                    <el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品介绍:">
                <el-input v-model="value.description" :autoSize="true" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="商品货号:">
                <el-input v-model="value.productSn"></el-input>
            </el-form-item>
            <el-form-item label="商品售价:">
                <el-input v-model="value.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价：">
                <el-input v-model="value.originalPrice"></el-input>
            </el-form-item>
            <el-form-item label="商品库存：">
                <el-input v-model="value.stock"></el-input>
            </el-form-item>
            <el-form-item label="计量单位：">
                <el-input v-model="value.unit"></el-input>
            </el-form-item>
            <el-form-item label="商品重量：" style="text-align: left;">
                <el-input v-model="value.weight" style="width: 300px"></el-input>
                <span style="margin-left: 20px">克</span>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="value.sort"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {queryPmsProductCategoryList} from '@/api/pmsApi'
import {queryPmsBrandList} from '@/api/pms/brand'
export default {
    name: 'PmsProductInfoDetail',
    props: {
        value: Object,
        isEdit: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            hasEditCreated:false,
            selectProductCateValue: [],
            productCateOptions:[],
            brandOptions:[],
            rules:{
                name:[
                    {required:true, message: '请输入商品名称', trigger: 'blur'},
                    {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                ],
                subTitle:[
                    {required: true, message: '请输入商品副标题', trigger: 'blur'}
                ],
                productCategoryId: [
                    {required: true, message: '请选择商品分类', trigger: 'blur'}
                ],
                brandId: [
                    {required: true, message: '请选择商品品牌', trigger: 'blur'}
                ],
                description: [
                    {required: true, message: '请输入商品介绍', trigger: 'blur'}
                ],
                requiredProp: [
                    {required: true, message: '该项为必填项', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        this.queryPmsProductCategoryList();
        this.queryPmsBrandList();
    },
    computed:{
        // 商品的编号
        productId() {
            return this.value.id;
        }
    },
    watch: {
        productId:function(newValue){
            if (!this.isEdit) {
                return;
            }
            if (this.hasEditCreated) {
                return;
            }
            if (newValue === null || newValue == undefined || newValue === 0) {
                return;
            }
            this.handleEditCreated();
        },
        // 监听selectProductCateValue 值的变化,给this.value.productCategoryId和this.value.productCategoryName赋值
        selectProductCateValue: function(newValue) {
            // newValue是一个数组,包含两个id,newValue[0]是父id,newValue[1]是id
            if (newValue != null && newValue.length == 2) {
                this.value.productCategoryId = newValue[1];
                this.value.productCategoryName = this.getCateNameById(this.value.productCategoryId);
            } else {
                this.value.productCategoryId = null;
                this.value.productCategoryName = null;
            }
        }
    },
    methods: {
        // 处理编辑逻辑
        handleEditCreated() {
            // 商品分类选择回填处理
            if (this.value.productCategoryId != null) {
                this.selectProductCateValue.push(this.value.cateParentId);
                this.selectProductCateValue.push(this.value.productCategoryId);
            }
            this.handleEditCreated = true;
        },
        // 查询商品分类
        queryPmsProductCategoryList() {
            queryPmsProductCategoryList({}).then(response => {
                let list = response.data;
                this.productCateOptions = [];
                for(let i = 0; i < list.length; i++) {
                    let children = [];
                    if (list[i].children  != null && list[i].children.length > 0) {
                        for (let j = 0; j < list[i].children.length; j++) {
                            children.push({
                                label: list[i].children[j].name,
                                value: list[i].children[j].id
                            });
                        }
                    }
                    this.productCateOptions.push({
                        label: list[i].name,
                        value: list[i].id,
                        children: children
                    })
                }
            });
        },
        // 查询商品品牌
        queryPmsBrandList() {
            queryPmsBrandList({}).then(response => {
                let data = response.data.data;
                let list = data.list;
                this.brandOptions = [];
                for(let i = 0; i < list.length; i++) {
                    this.brandOptions.push({
                        label: list[i].name,
                        value: list[i].id
                    })
                }
            });
        },
        // 跳转到下一步
        handleNext(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('nextStep');
                } else {
                    this.$message({
                        message: '验证失败',
                        type: 'error',
                        duration:1000
                    });
                    return false;
                }
            });
        },
        // 根据id获取商品分类名称
        getCateNameById(id){
            let name = null;
            for(let i = 0; i < this.productCateOptions.length; i++) {
                for(let j = 0; j < this.productCateOptions[i].children.length; j++) {
                    if (id == this.productCateOptions[i].children[j].value) {
                        name = this.productCateOptions[i].children[j].label;
                        return name;
                    }
                }
            }
            return name;
        },
        // 处理品牌选择变更
        handleBrandChange(val) {
            let brandName = '';
            for(let i = 0; i < this.brandOptions.length; i++) {
                if (val == this.brandOptions[i].value) {
                    brandName = this.brandOptions[i].label;
                    break;
                }
            }
            this.value.brandName = brandName;
        }
    }

}
</script>

<style scoped>

</style>